<template>
	<view class="container">
		<block v-for="sectionInfos,i in sections">
			<view class="section">
				<part-icon :desc="dataOfType[i].title" :iconClasses="[dataOfType[i].icon]" />
				<index-item isIndex :key="itemInfo" v-for="itemInfo,x in sectionInfos" :itemInfo="itemInfo" />
				<view class="show-more" @tap="toDetail(1)"> 查看更多精选画题 </view>
			</view>
		</block>
		<view class="section">
			<part-icon :desc="dataOfType[3].title" :iconClasses="[dataOfType[3].icon]" />
			<view class="workList">
				<work-item :key="itemInfo" v-for="itemInfo,x in newests" :itemInfo="itemInfo" />
			</view>
			
		</view>
		<login-modal ref="loginModal"/>
	</view>
</template>

<script>
	import partIcon from "@/components/common/part/part-icon.vue";
	import indexItem from "@/components/index/index-item.vue";
	import workItem from "@/components/index/index-work-item.vue";
	import userService from "@/services/userService.js";
	import mapper from "@/mapper/huati/index_huati.js";
	const dataOfType = {
		"0": {
			icon: 'iconxingqiujingxuan',
			title: '星球精选'
		},
		"1": {
			icon: 'icondajiaduzaiwan',
			title: '大家都在玩'
		},
		"2": {
			icon: 'iconzuixingengxin',
			title: '最新更新'
		}
	}
	export default {
		components: {
			indexItem,
			partIcon,
			workItem
		},
		data() {
			return {
				dataOfType,
				sections: [],
				newests: []
			}
		},
		onLoad() {
			// if(!userService.checkToken()){
			// 	this.$refs.loginModal.open()
			// }
			
		},
		mounted() {
			uni.showLoading({
				title: 'loading...',
				mask: true
			})
			this.getData();
			
		},
		onReady() {},
		methods: {
			async getData() {
				// 最新最熱
				let newestData = await mapper.getNewest();
				this.newests = newestData.data.slice(0, 4);
				// 星球精選
				let recommendsData = await mapper.getRecommend()
				recommendsData.data.forEach(item => {
					item.type = 0
				})
				this.sections.push(recommendsData.data.slice(0, 2))
				// 大家都在玩
				let hotsData = await mapper.getHots();
				hotsData.data.forEach(item => {
					item.type = 1
				})

				this.sections.push(hotsData.data.slice(0, 2));
				uni.hideLoading()
				uni.setStorage({
					key: 'recommendsData',
					data:  recommendsData.data
				});
				uni.setStorage({
					key: 'hotsData',
					data:  hotsData.data
				})
				uni.setStorage({
					key: 'newestData',
					data:  newestData.data
				})
			},
			formateData(flag, data) {
				function formateType(data) {

				}
				switch (flag) {
					case 'type':
						formateType(data)
				}
			},
			toDetail(type) {
				uni.navigateTo({
					url: `index/index_detail/index_detail?type=${type}`
				});
			},

			getCode() {
				
			},
			
			register() {
				uni.reLaunch({
					url: 'login2/login2'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-left: 32upx;
		padding-right: 32upx;
	}

	.section {
		padding-bottom: 60upx; // 标题		



		.show-more {
			line-height: 81upx;
			background: $c7;
			border-radius: 41px;
			text-align: center;
			color: $a1;
			margin-top: 32upx;
		}
	}

	.workList {
		flex-wrap: wrap;
		justify-content: space-between;

		.icon-wrapper {
			line-height: 1;
			font-size: 28upx;
			color: #8C8C8C;
			font-weight: 500;

			>.icon {
				color: #8C8C8C;
				font-size: 28upx;
				margin-right: 11upx;
			}
		}
	}

	.work-item {
		margin-bottom: 30upx;
		box-shadow: 6upx 12upx 20upx 0upx rgba(201, 201, 201, 0.24);
		border-radius: 8upx;
	}

	work-item {
		display: inline-flex;
	}

	work-item:nth-child(2n+1) {
		margin-right: 10upx;
	}

	.icon-wrapper {
		line-height: 100upx;
		font-weight: 500;
		font-size: 32upx;
		color: rgba(0, 0, 0, 1);
		font-weight: 500;

		>.icon {
			color: rgba(0, 0, 0, 1);
			font-size: 34upx;
			margin-right: 11upx;
		}
	}
</style>
